<template>
    <div class="con_store_main">
        <div v-if="isCustomer" style="margin-bottom: 20px;color: rgb(138, 138, 138);font-weight: bold;">
            顾客数据统计
        </div>
        <el-form v-if="isCustomer" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="时间范围">
                <el-date-picker v-model="formInline.dateRange" type="daterange" range-separator="至"
                    start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="formInline.gender" placeholder="选性别" clearable>
                    <el-option v-for="item in gender" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="findData" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
            <span class="span-items">顾客该时间段增量：{{ total }}</span>
        </el-form>
        <el-table v-if="isCustomer" class="table" :data="tableData" style="width: 100%" v-loading="loading"
            :default-sort="{ prop: 'index', order: 'descending' }">
            <el-table-column type="index" label="序号" sortable width="100">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="80">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="80">
            </el-table-column>
            <el-table-column prop="phoneNumber" label="联系方式" width="140">
            </el-table-column>
            <el-table-column class="el-status" prop="status" width="120" label="会员级别">
                <template slot-scope="scope">
                    <div class="ic-status">
                        <svg style="padding-right: 2px;" v-if="scope.row.status === '普通会员'" t="1718901779492"
                            class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="5833" width="20" height="20">
                            <path
                                d="M940.8 372.8l-176-219.2c-17.6-22.4-46.4-36.8-75.2-36.8H334.4c-28.8 0-56 12.8-75.2 36.8l-176 219.2C52.8 409.6 56 464 88 499.2l356.8 377.6 4.8 4.8c17.6 16 41.6 25.6 65.6 25.6h3.2c25.6-1.6 49.6-11.2 67.2-30.4l348.8-376c33.6-36.8 35.2-91.2 6.4-128zM888 456L539.2 832c-6.4 6.4-14.4 9.6-22.4 9.6-8 0-16-3.2-22.4-8L136 454.4c-11.2-11.2-11.2-28.8-1.6-41.6l174.4-219.2c6.4-8 16-12.8 25.6-12.8h355.2c9.6 0 19.2 4.8 25.6 12.8l176 219.2c8 12.8 8 30.4-3.2 43.2z"
                                fill="#333333" p-id="5834"></path>
                            <path
                                d="M681.6 438.4L515.2 616 344 435.2c-12.8-12.8-32-14.4-46.4-1.6-12.8 11.2-12.8 32-1.6 44.8l172.8 182.4 3.2 3.2c25.6 24 65.6 22.4 91.2-3.2L729.6 480c11.2-12.8 11.2-33.6-1.6-44.8-14.4-11.2-33.6-9.6-46.4 3.2z"
                                fill="#333333" p-id="5835"></path>
                        </svg>
                        <svg style="padding-right: 2px;" v-if="scope.row.status === '正式会员'" t="1718901664499"
                            class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="3776" width="20" height="20">
                            <path
                                d="M722.986667 192a21.056 21.056 0 0 1 19.2 12.245333l130.773333 277.994667a21.333333 21.333333 0 0 1-4.906667 24.832L519.04 826.453333a21.333333 21.333333 0 0 1-14.506667 5.589334 21.504 21.504 0 0 1-14.72-5.866667L155.733333 508.309333a21.333333 21.333333 0 0 1-4.48-24.725333l134.613334-279.466667a21.568 21.568 0 0 1 19.2-12.053333h417.92m0-64H305.066667a85.44 85.44 0 0 0-76.8 48.256L93.653333 455.893333a85.44 85.44 0 0 0 18.133334 98.88l334.08 317.866667a85.333333 85.333333 0 0 0 116.266666 1.130667l349.013334-319.402667a85.610667 85.610667 0 0 0 19.626666-99.285333L800.213333 177.088a85.333333 85.333333 0 0 0-77.226666-49.066667z"
                                fill="#333333" p-id="3777"></path>
                            <path
                                d="M512 704.149333a62.848 62.848 0 0 1-49.493333-24.362666l-156.373334-198.592a33.92 33.92 0 0 1 4.48-46.677334 31.210667 31.210667 0 0 1 45.013334 4.693334L512 637.866667l156.373333-198.592a31.232 31.232 0 0 1 45.013334-4.693334 33.92 33.92 0 0 1 4.48 46.677334l-156.373334 198.592A62.848 62.848 0 0 1 512 704.149333z"
                                fill="#FF9C00" p-id="3778"></path>
                        </svg>
                        {{ scope.row.status }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="note" label="备注" width="100">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <!-- <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="editCustomer(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="deleteCustomer(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="confirmUpdateStatus(scope.row)">切换状态</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <el-pagination style="margin: auto; margin-top: 8px" :hide-on-single-page="value"
            :current-page.sync="currentPage" :page-size="6" :pager-count="11" layout="prev, pager, next"
            :total="this.total" @current-change="handleSizeChange">
        </el-pagination>
    </div>
</template>
<script>
import { request } from "@/network/request/request";
export default {
    mounted() {
        this.findData();
    },
    data() {
        return {
            addForm: {
                storeId: 0,
                name: '',
                age: '',
                sex: '',
                status: '',
                phoneNumber: '',
                note: '',
            },

            updateForm: {
                customerId: 0,
                name: '',
                age: '',
                sex: '',
                status: '',
                phoneNumber: '',
                note: '',
            },
            isCustomer: true,
            updateStatus: {
                customerId: 0,
                status: ""
            },
            gender: [{ value: '男', label: '男' }, { value: '女', label: '女' }],
            formInline: { dateRange: [], gender: '' },
            updateBox: false,
            addBox: false,

            currentPage: 1, // 当前页码
            pageSize: 6, // 每页显示的记录数
            total: 0, // 总数目，默认设置为 0
            loading: false,
            value: false,
            tableData: [],


        };
    },
    methods: {
        time() {
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 600);
        },
        handleSizeChange() {
            this.findData();
        },
        deleteAlert(row) {
            this.$confirm('此操作将永久删除该顾客, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest(row);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        editCustomer(row) {
            console.log(row);
            this.updateForm.customerId = row.customerId;
            this.updateForm.name = row.name;
            this.updateForm.sex = row.sex;
            this.updateForm.age = row.age;
            this.updateForm.phoneNumber = row.phoneNumber;
            this.updateForm.note = row.note;
            this.updateBox = true;
        },
        addCustomer() {
            this.addBox = true;
        },
        deleteCustomer(row) {
            this.deleteAlert(row);
        },
        async confirmUpdate() {
            const config = {
                url: 'api/user/customer',
                method: "put",
                data: {
                    customerId: this.updateForm.customerId,
                    name: this.updateForm.name,
                    sex: this.updateForm.sex,
                    age: this.updateForm.age,
                    phoneNumber: this.updateForm.phoneNumber,
                    note: this.updateForm.note,
                }
            }
            const res = await request(config);
            if (res.data.code === 1) {
                this.$message.success("修改成功");
                this.findData();
                this.updateBox = false;
            }
        },
        async confirmUpdateStatus(row) {
            this.updateStatus.customerId = row.customerId;
            if (row.status === "普通会员") {
                this.updateStatus.status = "正式会员";
            } else {
                this.updateStatus.status = "普通会员";
            }
            const config = {
                url: 'api/user/customer',
                method: "put",
                data: {
                    customerId: this.updateStatus.customerId,
                    status: this.updateStatus.status,
                }
            }
            const res = await request(config);
            if (res.data.code === 1) {
                this.$message.success("会员状态修改成功");
                this.findData();
            }

        },
        async findData() {
            this.time();
            let date = null;
            let endDate = null;
            const storeId = localStorage.getItem("storeId");
      if (storeId == 0) {
        this.$message.error("无店铺数据！");
        return;
      }
            if (this.formInline.dateRange != null) {
                date = this.formInline.dateRange[0]
                endDate = this.formInline.dateRange[1]
            }
            const params = {
                date: date,
                endDate: endDate,
                gender: this.formInline.gender,
                currentPage: this.currentPage /* 当前页码 */,
                pageSize: this.pageSize /* 页码大小 */,
                storeId: localStorage.getItem("storeId"),
            };
            const config = {
                url: "api/user/data/new-customers",
                method: "get",
                params: params,
            };
            const res = await request(config);
            if (res.data.code === 1) {
                this.total = res.data.data.total; /* 得到数据的总数 */
                this.tableData = res.data.data.pageList; /* 得到数据 */
            }

        },
        async deleteRequest(row) {
            let id = row.customerId;
            const config = {
                url: `api/user/customer/${id}`,/* 通过路径参数 路径参数 */
                method: "delete",
            }
            const res = await request(config);
            if (res.data.code === 1) {
                this.$message({
                    type: 'success',
                    message: '删除成功'
                });
                this.findData();
            } else {
                this.$message({
                    type: 'error',
                    message: '删除失败'
                });
            }

        },
        async confirmAdd() {
            const storeId = localStorage.getItem("storeId");
      if (storeId == 0) {
        this.$message.error("无店铺数据！");
        return;
      }
            const config = {
                url: "api/user/customer",
                method: "post",
                data: {
                    storeId: localStorage.getItem("storeId"),
                    name: this.addForm.name,
                    age: this.addForm.age,
                    sex: this.addForm.sex,
                    status: this.addForm.status,
                    phoneNumber: this.addForm.phoneNumber,
                    note: this.addForm.note,
                }
            }
            const res = await request(config);
            if (res.data.code == 1) {
                this.$message.success("添加成功");
                this.addBox = false;
            }

            this.findData();
        },

    },
};
</script>
<style scoped>
.con_store_main {
    height: 498px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.ic-status {
    display: flex;
    align-content: center;
}

.span-items {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    margin-left: 10px;
    /* 调整与其他元素的距离 */
    color: rgb(144, 147, 165);
}
</style>